<template>
    <div class="person">
      <!-- src/components/Person.vue -->
      <img :src="avatar"/>
      <span>{{name}}</span>
      <i class="el-icon-error" @click="deleltePerson"></i>
    </div>
  </template>
  
  <script>
  export default {
    // props声明自定义属性，接收父组件传过来的参数: name  avatar
    // 一旦声明了这两个属性，
    // template中可以使用{{name}} {{avatar}}直接引用父组件传过来的参数
    props: ['name', 'avatar'],
    methods: {
      // 删除person,监听用户点击叉子
      deleltePerson() {
        //通知父组件,用户点叉子
        //当前子组件没法处理,只有交给父组件
        //this.$emit(),作用:主动触发自定义事件:del

        this.$emit('del')

        
      }
        
        
      }
    
  };
  </script>
  
  <style lang="scss" scoped>
  .person:hover i {
    display: block;
  }
  .person {
    width: 80px;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
    position: relative;
    i {
      position: absolute;
      top: -8px;
      right: -8px;
      display: none;
    }
    img {
      width: 80px;
    }
    span {
      font-size: 0.9em;
    }
  }
  </style>